﻿@using System.Text
@using System.Text.Encodings.Web
@using Nop.Services.Blogs
@model BlogPostModel
@inject IBlogService blogService

@{
    //resources for product tags input
    Html.AppendCssFileParts("~/lib/tagEditor/jquery.tag-editor.css");
    Html.AppendScriptParts("~/lib/tagEditor/jquery.tag-editor.min.js");
    Html.AppendScriptParts("~/lib/tagEditor/jquery.caret.min.js");
}
<script>
    @{
        //TODO move to Model
        var blogTags = blogService.GetAllBlogPostTags(0, 0, true);
        var blogTagsSb = new StringBuilder();
        blogTagsSb.Append("var initialBlogTags = [");
        for (var i = 0; i < blogTags.Count; i++)
        {
            var tag = blogTags[i];
            blogTagsSb.Append("'");
            blogTagsSb.Append(JavaScriptEncoder.Default.Encode(tag.Name));
            blogTagsSb.Append("'");
            if (i != blogTags.Count - 1)
            {
                blogTagsSb.Append(",");
            }
        }
        blogTagsSb.Append("]");
    }
    //tags
    $(document).ready(function() {
        @Html.Raw(blogTagsSb.ToString())
        $("#@Html.IdFor(model => model.Tags)").tagEditor({
            autocomplete: {
                delay: 0,
                position: { collision: 'flip' },
                source: initialBlogTags
            },
            delimiter: ',',
            placeholder: '@T("Admin.ContentManagement.Blog.BlogPosts.Fields.Tags.Placeholder")'
        });
    });
</script>
<div class="panel-group">
    @await Component.InvokeAsync("AdminWidget", new { widgetZone = AdminWidgetZones.BlogDetailsInfoTop, additionalData = Model })
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group" @(Model.AvailableLanguages.SelectionIsNotPossible() ? Html.Raw("style=\"display:none\"") : null)>
                <div class="col-md-3">
                    <nop-label asp-for="LanguageId" />
                </div>
                <div class="col-md-9">
                    <nop-select asp-for="LanguageId" asp-items="Model.AvailableLanguages" />
                    <span asp-validation-for="LanguageId"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <nop-label asp-for="Title" />
                </div>
                <div class="col-md-9">
                    <nop-editor asp-for="Title" asp-required="true"/>
                    <span asp-validation-for="Title"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <nop-label asp-for="Body" />
                </div>
                <div class="col-md-9">
                    <div class="input-group input-group-required">
                        <nop-editor asp-for="Body" asp-template="RichEditor"/>
                        <div class="input-group-btn">
                            <nop-required/>
                        </div>
                    </div>
                    <span asp-validation-for="Body"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <nop-label asp-for="BodyOverview" />
                </div>
                <div class="col-md-9">
                    <nop-textarea asp-for="BodyOverview"></nop-textarea>
                    <span asp-validation-for="BodyOverview"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <nop-label asp-for="Tags" />
                </div>
                <div class="col-md-9">
                    <nop-editor asp-for="Tags" />
                    <span asp-validation-for="Tags"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <nop-label asp-for="AllowComments" />
                </div>
                <div class="col-md-9">
                    <nop-editor asp-for="AllowComments" />
                    <span asp-validation-for="AllowComments"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <nop-label asp-for="StartDate" />
                </div>
                <div class="col-md-9">
                    <nop-editor asp-for="StartDate" />
                    <span asp-validation-for="StartDate"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <nop-label asp-for="EndDate" />
                </div>
                <div class="col-md-9">
                    <nop-editor asp-for="EndDate" />
                    <span asp-validation-for="EndDate"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <nop-label asp-for="SelectedStoreIds" />
                </div>
                <div class="col-md-9">
                    <nop-select asp-for="SelectedStoreIds" asp-items="Model.AvailableStores" asp-multiple="true" />
                    <script>
                            $(document).ready(function() {
                                var storesIdsInput = $('#@Html.IdFor(model => model.SelectedStoreIds)').data("kendoMultiSelect");
                                storesIdsInput.setOptions({
                                    autoClose: false,
                                    filter: "contains"
                                });

                                @if (Model.AvailableStores.Count == 0)
                                {
                                    <text>
                                storesIdsInput.setOptions({
                                    enable: false,
                                    placeholder: 'No stores available'
                                });
                                storesIdsInput._placeholder();
                                storesIdsInput._enable();
                                </text>
                                }
                            });
                    </script>
                </div>
            </div>
        </div>
    </div>
    @await Component.InvokeAsync("AdminWidget", new { widgetZone = AdminWidgetZones.BlogDetailsInfoBottom, additionalData = Model })
</div>